<form class="layui-form seller-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-4">
                <input type="text" name="datetime" id="datetime" placeholder="start_time _ end_time" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="padding-left: 5px;width: 200px;">
            <select name="card_type" id="card_type">
                <option value="">Select Card Type</option>
                {foreach $card_type as $c_d}
                <option value="{$c_d}">{$c_d}</option>
                {/foreach}
            </select>
        </div>
        <div class="layui-inline" style="padding-left: 5px;width: 200px;">
            <select name="tran_status" >
                <option value="">Select Tran Status</option>
                {foreach $tran_type as $v_d}
                <option value="{$v_d}">{$v_d}</option>
                {/foreach}
            </select>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="*"><i class="iconfont icon-chaxun"></i>Search</button>
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="user_cash">查询卡头消费</button>
            </div>
        </div>
    </div>
</form>
<div class="table-body">
    <table id="balanceTable" lay-filter="balanceTable"></table>
</div>
<div class="layui-form-item">
        <pre class="layui-code">
            银行类型: 1,2 为'Comdata' , 3 为'Connexpay'
            查询时间: 银1,2默认90天  , 银3 默认全部
        </pre>
</div>
<script>
    layui.use(['form', 'laydate', 'table',], function () {
        var laydate = layui.laydate,
            form = layui.form,
            table = layui.table; //表格
        //时间插件
        laydate.render({
            elem: '#datetime',
            range: '_',
            format: 'yyyy-MM-dd'
        });
        var tableIn = table.render({
            elem: '#balanceTable',
            height: 'full-99',
            cellMinWidth: '80',
            // totalRow: true,
            method: 'post',
            url: "{:url('searchTransAll')}",
            id: 'balanceTable',
            toolbar: '#toolbar',
            cols: [[
                { type: 'numbers'},
                { field: 'username',  align: 'left', title: '用户名',width: 200},
                { field: 'card_num',  align: 'left', title: 'CardNum',width: 150},
                { field: 'app_code',  align: 'left', title: 'appCode',width: 120},
                { field: 'idMatchNumber',  align: 'left', title: 'idMatchNumber',width: 160},
                // { field: 'tran_type',  align: 'left', title: '银3(Type)',width: 160},
                { field: 'type',  align: 'left', title: '交易状态',width: 120,
                    templet:function (d) {
                        const type = d.status;
                        const flag = d.flag;
                        var color = '';
                        if(type == 'Declined'){
                            color = 'red';
                        }else if(type == 'Posted'){
                            color = 'green';
                        }else if(type == 'Authorized'){
                            if(flag == 'X' || flag == 'Y'){
                                color = '#00aeef';
                            }else{
                                color = 'gray';
                            }
                        }else if(type == 'Credit'){
                            color = '#00aeef';
                        }else if(type == 'Reversal'){
                            color = '#d39e00';
                        }
                        return "<span style='color:" + color + ";font-weight:bold'>" + type + "</span>"
                    },
                    totalRowText:'Total:'},
                { field: 'flag',  align: 'left', title: 'Flag',width:60},
                {field: 'amount_auth', title: 'amountAuth', align:"right",width:100,
                    style:'color:#FF5722;font-weight:bold' , width:140, totalRow: true},
                {field: 'amount_post', title: 'amountPost', align:"right",
                    style:'color:#FF5722;font-weight:bold' , width:140, totalRow: true},
                { field: 'time_auth',  align: 'left', title: 'timeAuth',width:180},
                { field: 'time_post',  align: 'left', title: 'timePost',width:180},
                { field: '',  align: 'left', title: '是否审核',width: 110,
                    templet:function (d) {
                        const is_check = d.is_check;
                        if(is_check == 1){
                            return "<span style='color:red;font-weight:bold'>已退款</span>"
                        }else{
                            return "--";
                        }
                    }
                },
                { field: 'shopping',  align: 'left', title: 'shopping',width:200,},
                { field: 'desc',  align: 'left', title: 'desc',width:180},

            ]],
            page: true,
            limit: 20,
            limits: [50, 100, 500,1000,5000,10000],
        });
        form.on('submit(*)', function (data) {
            layui.table.reload('balanceTable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        layui.form.on('submit(user_cash)', function () {
            var loading =layer.load(1, {shade: [0.1,'#fff']});
            JsPost("{:url('getTransAll')}",{datetime:$("#datetime").val() , card_type:$("#card_type").val()}, function(res){
                layer.close(loading);
                if(res.code >0){
                    $('#up_time').text(res.data.time);
                    layer.msg(res.msg, { time: 1500 , icon:1}, function () {
                        tableIn.reload({
                            page:{
                                curr :1
                            }
                        });
                    });
                }else{
                    layer.msg(res.msg , {time:1500 , icon:2});
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>